/*
 * Copyright (c) 2013, Juergen Bocklage-Ryannel, Johan Thelin
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *     * Redistributions of source code must retain the above copyright
 *       notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above copyright
 *       notice, this list of conditions and the following disclaimer in the
 *       documentation and/or other materials provided with the distribution.
 *     * Neither the name of the editors nor the
 *       names of its contributors may be used to endorse or promote products
 *       derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
 * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
 * DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
 * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
 * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
 * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
 * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
 * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

// M1>>
import QtQuick 2.5

/*
一个模型视图的性能很大程度上依赖于代理的创建。例如滚动下拉一个链表视图
时，代理从外部加入到视图底部，并且从视图顶部移出。如果设置剪裁（clip）属
性为false，并且代理项花了很多时间来初始化，用户会感觉到视图滚动体验很差。
为了优化这个问题，你可以在滚动时使用像素来调整。使用cacheBuffer属性，在上
诉情况下的垂直滚动，它将会调整在链表视图的上下需要预先准备好多少像素的代
理项，结合异步加载图像元素（Image），例如在它们进入视图之前加载。
创建更多的代理项将会牺牲一些流畅的体验，并且花更多的时间来初始化每个代
理。这并不代表可以解决一些更加复杂的代理项的问题。在每次实例化代理时，它
的内容都会被评估和编辑。这需要花费时间，如果它花费了太多的时间，它将会导
致一个很差的滚动体验。在一个代理中包含太多的元素也会降低滚动的性能。
为了补救这个问题，我们推荐使用动态加载元素。当它们需要时，可以初始化这些
附加的元素。例如，一个展开代理可能推迟它的详细内容的实例化，直到需要使用
它时。每个代理中最好减少JavaScript的数量。将每个代理中复杂的JavaScript调用
放在外面来实现。这将会减少每个代理在创建时编译JavaScript。
*/
Rectangle {
    width: 120
    height: 300

    gradient: Gradient {
        GradientStop { position: 0.0; color: "#f6f6f6" }
        GradientStop { position: 1.0; color: "#d7d7d7" }
    }

    ListView {
        anchors.fill: parent
        anchors.margins: 20

        clip: true

        model: 100

        delegate: numberDelegate
        spacing: 5

        focus: true
    }

    Component {
        id: numberDelegate

        Rectangle {
            // 绑定视图属性width
            width: ListView.view.width
            height: 40

            // 绑定视图属性ListView.isCurrentItem
            color: ListView.isCurrentItem?"#157efb":"#53d769"
            border.color: Qt.lighter(color, 1.1)

            Text {
                anchors.centerIn: parent

                font.pixelSize: 10

                text: index
            }
        }
    }
}
// <<M1
